<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">服务使用分布</h2>
      <button class="text-primary text-sm hover:underline" @click="viewServiceDetails">详情</button>
    </div>
    <div class="p-4">
      <div class="flex flex-col md:flex-row items-center">
        <div class="w-full md:w-1/2 h-48" ref="serviceDistributionChart"></div>
        <div class="w-full md:w-1/2 mt-4 md:mt-0 md:pl-4">
          <div class="space-y-3">
            <div class="flex items-center justify-between"
              v-for="(service, index) in services" :key="index">
              <div class="flex items-center">
                <span class="badge-dot" :class="service.colorClass"></span>
                <span class="text-sm">{{ service.name }}</span>
              </div>
              <span class="text-sm font-medium">{{ service.percentage }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      services: [
        { name: '计算服务', percentage: 45, colorClass: 'bg-primary', color: '#3b82f6' },
        { name: '存储服务', percentage: 25, colorClass: 'bg-info', color: '#06b6d4' },
        { name: '网络服务', percentage: 15, colorClass: 'bg-success', color: '#10b981' },
        { name: '安全服务', percentage: 10, colorClass: 'bg-warning', color: '#f59e0b' },
        { name: '其他服务', percentage: 5, colorClass: 'bg-gray-400', color: '#9ca3af' }
      ],
      serviceChart: null
    };
  },
  mounted() {
    this.serviceChart = echarts.init(this.$refs.serviceDistributionChart);
    this.initServiceChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.serviceChart) {
      this.serviceChart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.serviceChart?.resize();
    },
    viewServiceDetails() {
      // 可添加详情页跳转逻辑
      console.log('查看服务详情');
    },
    initServiceChart() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}%'
        },
        legend: { show: false },
        series: [
          {
            name: '服务占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: { show: false },
            emphasis: {
              label: { show: true, fontSize: 16, fontWeight: 'bold' }
            },
            labelLine: { show: false },
            data: this.services.map(service => ({
              name: service.name,
              value: service.percentage,
              itemStyle: { color: service.color }
            }))
          }
        ]
      };
      this.serviceChart.setOption(option);
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.badge-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 4px;
}
.bg-primary { background-color: #3b82f6; }
.bg-info { background-color: #06b6d4; }
.bg-success { background-color: #10b981; }
.bg-warning { background-color: #f59e0b; }
.bg-gray-400 { background-color: #9ca3af; }
</style>